<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>登录</title>
    <link rel="shortcut icon" href="./img/logo.jpg" />
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./layui/css/layui.css">

    <style>
        header {
            width: 100%;
            display: flex;
            height: 72px;
            background-color: white;
            font-size: 16px;
            position: fixed;
            top: 0;
            border-bottom: 1px solid rgb(218, 218, 218);
            z-index: 10;
        }

        .header_left {
            width: 50%;
            font-weight: bolder;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding-right: 100px;
        }

        .header_left img {
            width: 40px;
            height: 40px;

        }


        .header_menu span {
            font-size: 25px;
            width: 40px;
            height: 40px;
        }

        .header_right {
            padding-right: 80px;
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .header_right span {
            font-size: 22px;
        }

        .header_right input {
            width: 260px;
            height: 40px;
            text-indent: 0;
            /* height: 100%; */
            background-color: transparent;
            padding-left: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* border-style: none; */
            border: 1px solid gray;
            background-color: white;
        }


        .search {
            display: flex;
            justify-content: left;
            align-items: center;
            /* border-collapse: collapse; */
        }

        .header_right .search_a {
            display: block;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            width: 40px;
            height: 40px;
            border: 1px solid rgb(218, 218, 218);
            border-left: 0;
        }
    </style>
    <style>
        .form-wrap {
            display: flex;
            justify-content: space-around;

            /* margin-top: 50px; */
            margin: 50px 200px;
        }

        .right-div {
            width: 400px;
            height: 330px;
            margin-top: 38px;
            margin-left: 20px;
            position: relative;
            padding: 25px;
            border: 1px solid rgb(218, 218, 218);
            margin-left: 200px;

        }

        .register-title {
            padding-top: 4px;
            padding-bottom: 8px;
        }

        .h-btn {
            display: block;
            width: 345px;
            height: 52px;
            background-color: antiquewhite;
            height: 52px;
            width: 345px;
            color: rgb(27, 27, 27);
            background-color: rgb(255, 255, 255);
            margin-top: 63px;
            font-family: Hiragino Kaku Gothic ProN;
            font-weight: 700;
            font-size: 18px;
            border: 1px solid gray;
            line-height: 52px;
            text-align: center;
        }

        .h-btn:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        <div class="header_left">
            <a href="index.html"><img src="./img/logo.jpg" alt=""></a>
            <span class="women">手机</span>
            <span class="men">电脑</span>
            <span class="child">平板</span>
            <span class="infant">智能设备</span>
        </div>
        <div class="header_right">
            <div class="search">
                <input type="text" placeholder="搜索商品">
                <span class="iconfont search_a">&#xe651;</span>

            </div>
            <span class="iconfont">&#xe62f;</span>
            <span class="iconfont">&#xe638;</span>
            <span class="iconfont">&#xe6de;</span>
            <span class="iconfont">&#xe631;</span>

        </div>

    </header>
    <div class="form-wrap">
        <div class="panel-left">
            <div class="left-div">
                <div class="login-header"><span class="login-register">登录/注册</span><span
                        class="naccess"><span>必填</span><span>※</span></span>
                    <div class="row-line"></div>
                </div>

                <div style="margin-bottom: 22px; width: 345px;">
                    <span>国家地区 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;中国大陆+86</span>

                </div>
                <div class="mobile_div">
                    <span><b>用户手机号:</b></span>
                    <br>
                    <div><input type="text" class="mobile" placeholder="请输入用户手机号" style="height: 52px; width: 345px;">
                    </div>
                </div><br>
                <span><b>密码:</b></span>
                <br>
                <div style="width: 100%;"><input type="text" class="password" placeholder="请输入密码"
                        style="height: 52px; width: 345px;">
                </div>
                <br>
                <br>
                <div>
                    <input type="checkbox" class="check">
                    我已阅读并同意
                    <span>《<a href="#">小米注册协议</a>》
                    </span>
                    <input type="checkbox" name="cookie_btn"><span style="color: rgb(248,107,8)"> 七天免登录</span>
                </div>

                <!-- 登录按钮 -->
                <button type="submit" disabled class="submit_btn"
                    style="width: 345px; height: 52px;margin-top: 50px;">登录</button>
            </div>
        </div>
        <div class="panel-right">
            <div class="right-div">
                <div class="register-title">小米账号注册</div>
                <div class="row-line"></div>
                <div class="new-member">注册小米账号享受更多福利</div>
                <div class="h-form-group h-clearfix regist_btn">
                    <div><a class="h-btn"
                            style="height: 52px; width: 345px; color: rgb(27, 27, 27); background-color: rgb(255, 255, 255); margin-top: 63px; font-family: Hiragino Kaku Gothic ProN; font-weight: 700; font-size: 18px;">新用户注册</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="./js/common.js"></script>
<script src="./js/jQuery.js"></script>
<script src="./layui/layui.js"></script>
<script>
    let mobile = document.querySelector(".mobile");
    let password = document.querySelector(".password");
    let flag1 = flag2 = flag3 = false;
    // const location1=getUrlParam(detail.html)
    // console.log(location1);
    // 跳转注册
    document.querySelector(".regist_btn").onclick = function (e) {
        location.href = "regist.html"
    }

    document.querySelector(".panel-left").addEventListener("click", function (e) {
        // 点击登录
        if (e.target.className == "submit_btn") {

            ajax({
                url: "http://phpclub.org.cn:8080/api//user/login",
                type: "post",
                data: {
                    mobile: mobile.value,
                    password: password.value
                },
                contentType: 'application/x-www-form-urlencoded', //表示设置请求头content-type对应的值
                // dataType: 'json', //表示服务端默认返回的数据格式
                success: function (response) {
                    console.log(response.data.id);//2195
                    if (response.code != 0) {
                        console.log(123465);
                        layer.open({
                            type: 0,
                            title: "错误信息提示",
                            content: "信息有误"
                        });

                    } else {
                        // 如果需要存储一组数据 cookie只支持字符串格式
                        // 所以使用JSON格式转换
                        let isRemember = document.querySelector('input[name="cookie_btn"]').checked;
                        let time = 0;
                        if (isRemember) {
                            time = 7 * 24 * 3600;
                        }
                    
                        setCookie("nickname", JSON.stringify(response.data), time)
                
                        let callback = getUrlParam('callback')?decodeURIComponent(getUrlParam('callback')):'index.html';
                    location.href = callback;
                    }
                }
            })
        }
        // 手机号
        if (e.target.className == "mobile") {
            mobile.style.border = "1px solid skyblue"
        }
        document.querySelector('.mobile').onblur = () => {
            mobile.style.border = "1px solid rgb(118,118,118)"
            if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(document.querySelector('.mobile').value)) {
                console.log("请正确输入手机号");
                flag1 = false;
            } else {
                console.log("手机号格式正确");
                flag1 = true;
            }
            changeStatus()
        }
        // 密码
        if (e.target.className == "password") {
            password.style.border = "1px solid skyblue"
        }
        document.querySelector(".password").onblur = function () {
            password.style.border = "1px solid rgb(118,118,118)"
            if (!password) {
                flag2 = false;
            } else {
                flag2 = true;
            }
            changeStatus()
        }

        // 勾选阅读框
        if (e.target.className == "check") {

            //   勾选check框
            if (document.querySelector(".check").checked == false) {
                document.querySelector(".submit_btn").disabled = true;
                console.log("请阅读相关协议");
                flag3 = false;
            } else if (document.querySelector(".check").checked == true) {
                console.log('已勾选');
                document.querySelector(".submit_btn").disabled = false;
                flag3 = true;
            }
            changeStatus()
        }
    })

    function changeStatus() {
        let btn = document.querySelector('.submit_btn');
        (flag3 && flag2 && flag1) ? (btn.disabled = false) : (btn.disabled = true)
    }
</script>

</html>